<template>
  <div id="app" v-loading="loading" element-loading-text="正在加载中">
    <el-container v-if="menuVisible">
      <el-header>{{username}}
        <el-button @click="exit">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>应用管理</template>
              <el-menu-item-group>
                <router-link :to="{path:'/oauth2/client/list'}">
                  <el-menu-item index="1-1">
                    列表
                  </el-menu-item>
                </router-link>
                <router-link :to="{path:'/oauth2/client/add'}">
                  <el-menu-item index="1-2">
                    新增
                  </el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main><router-view/></el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <div v-else>
      <router-view/>
    </div>
  </div>
</template>
<script>

export default {
  data(){
    return {
      loading:false,
      menuVisible: false,
      mainVisible: false,
      username: ''
    }
  },
  created() {
  },
  beforeUpdate() {
    this.loading=true;
    const user = localStorage.getItem("user")
    if (user) {
      console.log(user)
      // const user =   JSON.parse(user)
      this.username = user
    }
    if(this.$route.name != 'oauth2_callback' &&this.$route.name != 'error' && this.$route.path != '/login' && this.$route.path != '/oauth2/login' && this.$route.path != '/register') {
      this.menuVisible = true
    } else {
      this.menuVisible = false
    }
    this.mainVisible = true
    this.loading=false;
  },

  methods:{
    exit(){
      localStorage.clear()
      this.$router.replace('/login?redirect_uri=' + this.$route.path);
    }
  }
}
</script>
<style>
[v-cloak] { display: none }


.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}



body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
